<template>
    <el-card shadow="never" class="aui-card--fill">
        <div style="">
                    <el-row v-show="ruleForm">
                        <div>
                            <el-form :model="ruleForm" ref="ruleForm">
                                <el-row :gutter="12" style="margin-top:60px;">
                                    <el-col :span="5">
                                        <div style="text-align:right;"><span>学号：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="username">
                                                <!-- {{ruleForm.username}} -->
                                            <el-input type="text" style="width:250px;" v-model="ruleForm.username" placeholder="请输入学号" readonly></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>姓名：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="stuName">
                                            <!-- {{ruleForm.stuName}} -->
                                            <el-input type="text" style="width:250px;" v-model="ruleForm.stuName" placeholder="请输入姓名" readonl></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="5">
                                        <div style="text-align:right;"><span>性别：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="stuSex">
                                            <el-select style="width:250px;" v-model="ruleForm.stuSex" placeholder="性别">
                                                <el-option v-for="item in getDictList('gender')" :label="item.dictLabel"  :key="item.id" :value="item.dictLabel"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>院系：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="stuDepartment">
                                            <el-select filterable style="width:250px;" v-model="ruleForm.stuDepartment" placeholder="院系">
                                                <el-option v-for="item in getDictList('department')" :label="item.dictLabel"  :key="item.id" :value="item.dictLabel"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="5">
                                        <div style="text-align:right;"><span>专业：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="stuProfessional">
                                            <el-select filterable style="width:250px;" v-model="ruleForm.stuProfessional" placeholder="专业">
                                                <el-option v-for="item in getDictList('major')" :label="item.dictLabel"  :key="item.id" :value="item.dictLabel"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>班级：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="stuClass">
                                            <el-select filterable style="width:250px;" v-model="ruleForm.stuClass" placeholder="班级">
                                                <el-option v-for="item in getDictList('classes')" :label="item.dictLabel"  :key="item.id" :value="item.dictLabel"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="5">
                                        <div style="text-align:right;"><span>电话：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="stuPhone" :rules="[{ required: true, message: '电话不能为空', trigger: 'blur' },{ type: 'number',message: '手机号格式不正确',trigger: 'blur',transform(value) {var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
                                                if (!phonereg.test(value)) {
                                                    return false
                                                } else {
                                                        return Number(value)
                                                }
                                            }
                                        }]">
                                            <el-input type="text" style="width:250px;" v-model="ruleForm.stuPhone" placeholder="请输入电话" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>Q Q：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="stuQq">
                                            <el-input type="input" style="width:250px;" v-model="ruleForm.stuQq" placeholder="请输入QQ" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="5">
                                        <div style="text-align:right;"><span>微信：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="stuWx">
                                            <el-input type="text" style="width:250px;" v-model="ruleForm.stuWx" placeholder="请输入微信" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>邮箱号：</span></div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item prop="stuMail" :rules="[{ required: true, message: '邮箱不能为空', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
                                            <el-input type="text" style="width:250px;" v-model="ruleForm.stuMail" placeholder="请输入邮箱号" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:10px;">
                                    <el-col :span="24" style="text-align:center;">
                                        <!-- <el-button plain round size="medium" @click="editDialogVisible = false">取 消</el-button> -->
                                        <el-button  @click="resetForm('ruleForm')">重置</el-button>
                                        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </el-row>
                </div>
            <div>
        </div>
    </el-card>
</template>
<script>
import servicesApi from '@/services/servicesApi';
import storageService from '@/store/storage';
import { getDictDataList } from '@/utils';
import debounce from 'lodash/debounce';
export default {
    data() {
    //   let checkpassword = (rule, value, callback) => {
    //     if (!value) {
    //       return callback(new Error('密码不能为空'));
    //     }
    //     else if (this.ruleForm.password2 !== '') {
    //         this.$refs.ruleForm.validateField('password2');
    //       callback();
    //     }
    //   };
    //   let checkpassword2 = (rule, value, callback) => {
    //     if (!value) {
    //       return callback(new Error('确认密码不能为空'));
    //     }
    //     else if (value !== this.ruleForm.password) {
    //       callback(new Error('两次输入密码不一致!'));
    //     } else {
    //       callback();
    //     }
    //   };

        return {
           ruleForm: {
                username: 'student',
                stuName: '胡彪',
                stuSex: '',
                stuDepartment: '',
                stuProfessional: '',
                stuTitle: '',
                stuClass: '',
                stuPhone: '',
                stuMail: '',
                stuWx: '',
                password: ''
            },
        // rules: {
        //   password: [
        //     { validator: checkpassword, trigger: 'blur' }
        //   ],
        //   password2: [
        //     { validator: checkpassword2, trigger: 'blur' }
        //   ]
        // }

        }
    },
    created() {
        this.getData()
    },
    methods: {
        getDictList(dictType) {
      let list = getDictDataList(dictType)
      // // console.log(list)
      return list
    },
        getData() {
            let userId = storageService.getAccountId()
            servicesApi.getUserById(userId).then(res => {
                let data = res.data.data
                if (res.data.code !== 200) {
                return this.$message.error(res.data.msg)
                }
                // console.log('学生个人信息：')
                // console.log(this.ruleForm)
                this.ruleForm = data
                // console.log(res.data.data)
                this.$store.state.user.userId = data.userId
                this.$store.state.user.username = data.username
                this.$store.state.user.state = data.state
                // console.log(this.$store.state.user)
            })
        },
    // 提交表单
    submitForm: debounce(function() {
        this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
            servicesApi.editstudentmanageApi(this.ruleForm).then(res => {//将form表单作为参数
            // console.log(res)
            if (res.data.code===200) {
                this.$message.success('修改成功');
                this.getData()
            } else {
                this.$message.error(res.data.msg);
                }
            })
          }
        })
      }, 1000, { 'leading': true, 'trailing': false }),
      resetForm: debounce(function(formName) {
        // this.$refs[formName].resetFields();
        this.getData()
            }, 1000, { 'leading': true, 'trailing': false })
        }
    }
</script>

